<script lang="ts" setup>
import { QrcodeCapture } from "vue-qrcode-reader";
import { getSvg } from "@/utils";
import type { DetectedBarcode } from "vue-qrcode-reader";
const props = defineProps({
  onDetect: {
    type: Function,
    default: () => {}
  }
});

const onDetect = (detectedCodes: DetectedBarcode[]) => {
  if (detectedCodes.length > 0) {
    const result = detectedCodes[0];
    console.log(result);
    props.onDetect(detectedCodes);
  }
};
</script>
<template>
  <a
    href="javascript:void(0)"
    class="rounded-50% w-60 h-60 relative inline-block decoration-none rounded-50%"
  >
    <img class="w-60 h-60" :src="getSvg('album')" alt="" />
    <qrcode-capture
      class="absolute opacity-0 top-0 left-0 top-0 w-full h-full rounded-50%"
      @detect="onDetect"
      :capture="true"
    />
  </a>
</template>
<style lang="scss" scoped></style>
